<template>
  <div id="main" style="height:100%;">
    <view-box body-padding-top="45px" body-padding-bottom="55px">

      <x-header slot="header" :left-options="{showBack: false}" style="width:100%;position:absolute;left:0;top:0;z-index:100;">
        {{title.name}}
      </x-header>
      <!--{{tabbarSelectedIndex}}-->
      <router-view></router-view>

      <tabbar v-model="title.num">
        <tabbar-item link="/main/metting">
          <i slot="icon" class="iconfont icon-huiyishi-"></i>
          <span slot="label">会议预约</span>
        </tabbar-item>
        <tabbar-item link="/main/manger">
          <i slot="icon" class="iconfont icon-huiyishiguanli"></i>
          <span slot="label">会议管理</span>
        </tabbar-item>
        <tabbar-item link="/main/my">
          <i slot="icon" class="iconfont icon-huiyiguanli"></i>
          <span slot="label">我的</span>
        </tabbar-item>
      </tabbar>
    </view-box>
  </div>
</template>

<script>
  import { Tabbar, TabbarItem, ViewBox, XHeader } from "vux";

  export default {
    name: "Main",
    components: {
      Tabbar,
      TabbarItem,
      ViewBox,
      XHeader
    },
    data() {
      return {};
    },
    computed: {
      title() {
        let str = {
          name: "",
          num: 0
        }
        switch(this.$route.path) {
          case "/main/manger":
            str.name = "会议预约";
            str.num = 0;
            break;
          case "/main/metting":
            str.name = "会议管理";
            str.num = 1;
            break;
          case "/main/my":
            str.name = "我的";
            str.num = 2;
            break;
          default:
            break;
        }
        return str;
      }
    },
    methods: {}
  };
</script>
<style>
  #main {
    /*background-color: #fafafa;*/
  }
</style>
